<template>
<div id="my-background">
  <div class="login-div">
    <div class="login-logo">
    </div>
    <div class="login-main">
      <div class="login-input">
        <i class="el-icon-user icon-user"></i>
        <input class="input-info" v-model="username" type="text" name="" value="" placeholder="请输入您的用户名" @keyup.enter="login()" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
      </div>
      <div class="login-input">
        <i class="el-icon-unlock icon-user"></i>
        <input class="input-info" v-model="password" type="password" name="" value="" @keyup.enter="login" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
      </div>
      <div class="login-check">
        <el-checkbox class="checks" v-model="checkedUsername">记住账号</el-checkbox>
        <el-checkbox class="checks" v-model="checkedPassword" style="margin-left:10px">记住密码</el-checkbox>
      </div>
    </div>
    <div class="login-button" @click="login()" v-loading.lock="fullscreenLoading">
      登录
    </div>
  </div>
</div>
</template>

<script>
import myCommon from './common.vue'
export default {
  name: 'loginweb',
  data () {
    return {
      username: 'iotmaster@iotsharp.net',
      password: '285220Myh,,.',
      checkedUsername: false,
      checkedPassword: false,
      fullscreenLoading: false
    }
  },
  methods: {
    // 登录
    login: function () {
      this.fullscreenLoading = true
      this.$axios.post(myCommon.HTTPURL + '/api/Account/Login', {
        username: this.username,
        password: this.password
      })
        .then((response) => {
          if (response.data.code === 10000) {
            this.$message({
              message: '验证成功，跳转中.....',
              type: 'success',
              duration: 700
            })
            window.localStorage['token'] = response.data.token.access_token
            this.toHomePage(this.username, this.password)
          } else {
            this.$message.error('验证失败！用户名或密码错误！')
          }
          this.fullscreenLoading = false
        }).catch(() => {
          this.$message.error('验证失败！系统异常，请稍后重试或联系管理员')
          this.fullscreenLoading = false
        })
    },
    // 跳转
    toHomePage: function (username, password) {
      var userData = {
        username: username,
        password: password
      }
      sessionStorage.setItem('userData', JSON.stringify(userData))
      sessionStorage.setItem('password', password)
      sessionStorage.setItem('username', username)
      console.log(username, password)
      // 直接调用$router.push 实现携带参数的跳转
      this.$router.push({
        name: 'Home',
        params: {
          username: username,
          password: password
        }
      })
    }
  }
}
</script>

<style>
  @import url("../../static/css/style.css");
  .login-logo{
    height: 200px;
    width: 200px;
    text-align: center;
    margin: 0 auto 30px auto;
  }
  .login-div{
    width: 500px;
    height: 400px;
    position: absolute;
    display: inline-block;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    margin-left: -250px;
  }
  .login-check{
    color: white;
    width: 300px;
    margin: 0 auto;
    height: 25px;
  }
  .checks{
    color:white !important;
    float: right;
    margin: 0px 5px !important;
  }

  .login-button:hover{
    opacity: 0.7;
  }
  .input-info{
    background: transparent;
    border: none !important;
    width: 230px;
    margin-left: 10px;
    height: 30px;
    position: absolute;
    line-height: 30px;
    color: white;
  }
  .input-info:focus{
    outline: none;
    color: white;
  }
  .icon-user{
    font-size: 25px;
    line-height: 30px !important;
    color:white;
  }
  ::-webkit-input-placeholder {
    color: #ccc;
  }
  :-moz-placeholder {/* Firefox 18- */
    color: #ccc;
  }
  ::-moz-placeholder{/* Firefox 19+ */
   color: #ccc;
  }
  :-ms-input-placeholder {
    color: #ccc;
  }
  @media screen and (max-width: 1211px) {
    .login-button {
      cursor: pointer;
      width: 300px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      background-color: rgb(11, 26, 50);
      border-radius: 5px;
      margin: 0 auto;
      margin-top: 0px;
      color: white;
    }
    .login-input{
      border-bottom: 1px solid white;
      height: 30px;
      width: 300px;
      margin: 20px auto;
    }
  }
  @media screen and (min-width: 1212px) {
    .login-button {
      cursor: pointer;
      text-align: center;
      width: 400px;
      height: 50px;
      line-height: 50px;
      background-color: rgb(11, 26, 50);
      border-radius: 5px;
      margin: 0 auto;
      margin-top: 0px;
      color: white;
      margin-top: 20px;
    }
    .login-input {
      border-bottom: 1px solid white;
      height: 40px;
      width: 400px;
      margin: 30px auto;
    }
  }
</style>
